<template>
	<div class="demo-split">
		<Split v-model="split3">
			<div slot="left" class="demo-split-pane no-padding">
				<Split v-model="split4" mode="vertical">
					<div slot="top" class="demo-split-pane">
						<Table highlight-row @on-current-change="deinfos" :loading="loading" stripe :columns="columns1"
							:data="data1" height="420"></Table>
					</div>
					<div slot="bottom" class="demo-split-pane">
						<zwinfo :datas="zwdata" />
					</div>
				</Split>
			</div>
			<div slot="right" class="demo-split-pane no-padding">
				<Split v-model="split5" mode="vertical">
					<div slot="top" class="demo-split-pane">
						<div style="float: right;">
							<Button v-if="show" shape="circle" icon="md-grid" @click="cl(1)"></Button>
							<Button v-else shape="circle" icon="md-images" @click="cl(-1)"></Button>
						</div>
						<keep-alive>
							<deinfo v-if="show" :datas="datas" />
						</keep-alive>
						<div v-if="!show">
							<rose dyid="t1" title="存储组成" :rosedata="rosedata" />
							<pie dyid="t2" title="容量使用情况" :value="piedata" />
						</div>



					</div>
					<div slot="bottom" class="demo-split-pane">
					</div>

				</Split>
			</div>
		</Split>
	</div>
</template>

<script>
	import deinfo from './deinfo.vue'
	import zwinfo from './zwinfo.vue'
	import rose from '../chart/rose.vue'
	import pie from '../chart/pie.vue'
	export default {
		data: function() {
			return {
				loading: true,
				show: true,
				formInline: {
					sids: '',
					zids: "",
					nums: "",
					action: ""
				},
				ruleInline: {
					sids: [{
						required: true,
						message: '输入的仓库ID不能为空',
						trigger: 'blur'
					}],
					zids: [{
						required: true,
						message: '输入的作物ID不能为空',
						trigger: 'blur'
					}],
					nums: [{
						required: true,
						type: 'number',
						message: '请输入数字不能为空.',
						trigger: 'blur'
					}]
				},
				split3: 0.5,
				split4: 0.5,
				split5: 0.7,
				columns1: [{
						title: 'ID',
						key: 'sid'
					},
					{
						title: '仓库编号',
						key: 'name'
					},
					{
						title: '现有量',
						key: 'nv'
					},
					{
						title: '总量',
						key: 'tv'
					},
					{
						title: '位置',
						key: 'position'
					}
				],
				data1: [],
				datas: [],
				zwdata: [],
				rosedata: []

			}
		},
		components: {
			deinfo,
			zwinfo,
			rose,
			pie
		},
		mounted() {
			this.axios.get('/api/storge').then(r => {
				this.data1 = r.data
				this.loading = false
				this.axios.post('/api/deinfo', {
					sid: r.data[0].sid
				}).then(r => {
					this.datas = r.data
					var arr = []
					
					for (var it in this.datas) {
						arr.push({
							value: this.datas[it].znv,
							name: this.datas[it].zname
						})
						// this.rosedata.push({value:this.datas[it].znv,name:this.datas[it].zname})
					}
					
					
					this.rosedata = arr
				}).catch(e => {
					this.$Message.info("e" + e)
				})
				this.piedata = [{
					value: this.data1[0].nv,
					name: "已使用"
				}, {
					value: this.data1[0].tv - this.data1[0].nv,
					name: "未使用"
				}]
				
				
			}).catch(e => {
				this.$Message.error("e" + e)
			})
			this.axios.get('/api/deinfo').then(r => {
				this.zwdata = r.data
			}).catch(e => {
				this.$Message.error(e)
			})


		},
		methods: {
			auto_actions: function(value) {
				this.$refs.formInline.validate((valid) => {
					if (valid) {
						if (value == 1) this.formInline.action = 1
						else this.formInline.action = -1
						this.axios.put("/api/deinfo", this.formInline).then(r => {
							var state_info = r.data.state
							if (state_info == "修改成功") {
								this.axios.get('/api/storge').then(r => {
									this.data1 = r.data
								}).catch(e => {
									this.$Message.error("e" + e)
								})
								this.axios.post('/api/deinfo', {
									sid: this.formInline.sids
								}).then(r => {
									this.datas = r.data
								}).catch(e => {
									this.$Message.info("e" + e)
								})
								this.axios.get('/api/deinfo').then(r => {
									this.zwdata = r.data
								}).catch(e => {
									this.$Message.error(e)
								})

							} else {
								this.$Message.error(state_info)
							}
						}).catch(error => {
							this.$Message.error(error)
						})
					} else {
						this.$Message.error("请正确输入")
					}

				})
			},

			deinfos: function(cr) {
				this.piedata = [{
					value: cr.nv,
					name: "已使用"
				}, {
					value: cr.tv - cr.nv,
					name: "未使用"
				}]
				this.axios.post('/api/deinfo', {
					sid: cr.sid
				}).then(r => {
					this.datas = r.data
					var arr = []

					for (var it in this.datas) {
						arr.push({
							value: this.datas[it].znv,
							name: this.datas[it].zname
						})
						// this.rosedata.push({value:this.datas[it].znv,name:this.datas[it].zname})
					}


					this.rosedata = arr

				}).catch(e => {
					this.$Message.info("e" + e)
				})
			},
			cl(v) {
				if (v === 1) {

					this.show = false
				} else {
					this.show = true
				}
			}

		},
	}
</script>

<style>
	.demo-split {
		height: 100%;
		border: 1px solid #dcdee2;
	}

	.demo-split-pane {
		padding: 10px;
	}

	.demo-split-pane.no-padding {
		height: 100%;
		padding: 0;
	}
</style>
